function loadProductData() {
    $.ajax({
        url: '/product/query',
        type: 'POST',
        data: getUrlParamToJSON(),
        dataType: 'JSON',
        contentType: 'application/json;charset=utf-8',
        error: (err) => {
            console.error(err.responseText)
            open_toast('fail', '加载商品信息失败!')
        },
        success: (data) => {
            console.log(data)
            renderProductInfo(data['response']['prodInfo'])
            renderSearch(data['response']['prodtypesInfo'])
            renderPageInfo(data['response']['pageInfo'])
            renderProdtype(data['response']['prodtypesInfo'])
        }
    })
}

function searchType(name) {
    window.location.href = updateCurrentUrlParam('prodtype', name)
}
function searchProduct(){
    const searchText = $('#input-search').val()
    window.location.href = updateCurrentUrlParam('productName', searchText)
}
function renderSearch(prodtypsInfo) {
    let prodtypeName = getUrlParam(decodeURI(location.href), 'prodtype')
    // 先渲染所有的商品分类
    $prodtype = $(`<a></a>`)
    $.each(prodtypsInfo, (index, prodtype) => {
        $prodtype.append(`<a class="dropdown-item" onclick="searchType('${prodtype.name}')"> ${prodtype.name}</a>`)
    })
    // 渲染搜索栏
    $('#nav-search').html(`  
    <div class="input-group-prepend">
        <button id="btn-ctype" class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"
           >
            ${prodtypeName === '' ?  '所有商品' : prodtypeName}
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" onclick="searchType('')">所有商品</a>`
        + $prodtype.html() +
        `
     </div>
     </div>
     <input id="input-search" type="text" class="form-control" placeholder="请输入查询的商品，商品名称/种类/...">
     <div class="input-group-append">
        <button class="input-group-text btn btn-info" onclick="searchProduct()">
            <i class="bi bi-search"></i>
        </button>
     </div>`)
}
// 渲染分页信息
function renderPageInfo(pageInfo) {
    // 先渲染某一页
    $perPage = $(`<li></li>`)
    for (let index = 1; index <= eval(pageInfo['pages']); index++) {
        $perPage.append(`
                    <li class="page-item">
                        <a class="page-link u-a-com d-block ${index == pageInfo.pageNum ? ' bg-info text-light' : ''}"
                            href="${updateCurrentUrlParam('pageNow', index)}">
                            ${index}
                        </a>
                    </li>`)
    }
    $('#nav-page').html('')
    $('#nav-page').html(`
    <nav aria-label="Page navigation" class="u-text-sm">
        <ul class="pagination justify-content-center">
            <!--首页-->
            <li class="page-item">
                    <a class="page-link u-a-com d-block"
                       href="${updateCurrentUrlParam('pageNow', pageInfo.navigateFirstPage)}">
                        首页
                    </a>
            </li>
            <!--上一页-->
            <li class="page-item">
                <a class="page-link u-a-com d-block"
                    href="${updateCurrentUrlParam('pageNow', pageInfo.prePage)}"
                    aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>`
        + $perPage.html() + `
            <!--下一页-->
            <li class="page-item">
                <a class="page-link u-a-com d-block"
                    href="${updateCurrentUrlParam('pageNow', pageInfo.nextPage)}"
                    aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <!--最后一页-->
            <li class="page-item">
                <a class="page-link u-a-com d-block"
                    href="${updateCurrentUrlParam('pageNow', pageInfo.navigateLastPage)}">
                    末页
                </a>
            </li>
        </ul>
    </nav>`)
}

// 渲染商品的类别
function renderProdtype(prodtype) {
    let url_prodtype = getUrlParam(location.href, 'prodtype');
    $('#ul-product-types').html(`
        <li class="list-group-item">
            <a class="btn btn-sm"
             style="${url_prodtype === '所有商品' ? 'background: palevioletred' : 'background:lightseagreen'}"
                     href="${updateCurrentUrlParam('prodtype', '')}">
                      所有商品
            </a>
        </li>`)
    let i = 0
    // 加载商品分类列表
    $.each(prodtype, (index, obj) => {
        ++i;
        $('#ul-product-types').append(`
      <li class="list-group-item">
                <a class="btn btn-sm"
                   style="${url_prodtype === obj['name'] ? 'background: palevioletred' : 'background:lightseagreen'}"
                   href="${'/index.html?prodtype=' + obj['name'] + '&pageNow=1'}">
                   ${obj['name']}
                </a>
              </li>
      `)
    })
    // 加载所有信息
    $('#ul-product-types').append(`<h1 class="u-text-sm" th:text="'总共有 ' + ${i} + ' 个商品'"></h1>`)
}
// 渲染当前页的商品信息
function renderProductInfo(productInfo) {
    // 渲染搜索的结果条数
    $('#text-show-search-result').text(`共有${productInfo.length}条结果`)
    // 加载每个商品信息
    $('#ul-product').html('')
    $.each(productInfo, (name, product) => {
            let prodtype = product['prodtype']
            $('#ul-product').append(`
            <li class="u-com-card col-md-2 col-sm-4 u-card-body text-center" data-id="${product.id}">
                <img src="${product['img']}" class="u-card-img">
                <h6 class="u-text-sm text-danger">￥<span>${product['price']}</span></h6>
                <h6 class="u-text-sm">
                    <span>[${prodtype['name']}]${product['name']}</span>
                </h6>
            </li>`)
    })
}
loadProductData()